<template>
	<view>

		<view class="header" v-if="isSHow">
			<view class="tu">
				<image class="img1" src="../../static/image/13.jpg" mode=""></image>
				<view class="t1">
					<view class="h1">代用名</view>
					<view class="p1">完善资料让小U更懂您</view>
				</view>
				<view class="t2">
					<view class="">
						<image class="imgg" src="../../static/image/wallet.png" mode=""></image>
					</view>
					<view class="qian">每日签到</view>
				</view>
			</view>
			<view class="tu1">
				<view class="dd">
					<view class="shi">12</view>
					<view class="wo">我的收藏</view>
				</view>
				<view class="dd">
					<view class="shi">12</view>
					<view class="wo">浏览记录</view>
				</view>
				<view class="dd">
					<view class="shi">￥0</view>
					<view class="wo">我的红包</view>
				</view>
				<view class="dd">
					<view class="shi">12</view>
					<view class="wo">优惠卷</view>
				</view>
			</view>
			<view class="tu2">
				<view class="ddd2">
					<view class="hhh">我的订单</view>
					<view class="qqq">全部订单 > </view>
				</view>
				<view>
					<u-grid :border="false" col="4">
						<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
							<image class="img22" :src="baseListItem.name" mode=""></image>
							<text class="grid-text">{{baseListItem.title}}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>
			</view>
			<view class="mj"></view>
			<view class="buttom">
				<view class="de">
					<view class="zuo">
						<image src="../../static/image/address.png" mode=""></image>
						<text>地址管理</text>
					</view>
					<text>></text>
				</view>
				<view class="de">
					<view class="zuo">
						<image src="../../static/image/4.png" mode=""></image>
						<text>我的钱包</text>
					</view>
					<view class="you1">
						<text class="you">剩余200U币</text>
						<text>></text>
					</view>
				</view>
				<view class="de">
					<view class="zuo">
						<image src="../../static/image/QR_code.png" mode=""></image>
						<text>我的二维码</text>
					</view>
					<text>></text>
				</view>
				<view class="de">
					<view class="zuo">
						<image src="../../static/image/partner.png" mode=""></image>
						<text>我的小伙伴</text>
					</view>
					<text>></text>
				</view>
				<view class="de">
					<view class="zuo">
						<image src="../../static/image/free.png" mode=""></image>
						<text>0元试用</text>
					</view>
					<text>></text>
				</view>
			</view>
		</view>
		<!-- <view class="shou"></view> -->

		<!-- 未登录状态 -->
		<view class="center" v-else>
			<view class="hhh">
				欢迎登陆小U商城
			</view>
			<view class="ttt">
				<image src="../../static/image/logo1.png" mode=""></image>
			</view>

			<!-- 根据平台去判断按钮显示  微信小程序中显示一键登录  h5平台显示手机号验证 -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="weixin">
				<u-button type="Error" hover-class="touchOpacity" open-type="getPhoneNumber"
					@getphonenumber="wexinLogin">微信一键登录</u-button>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="weixin">
				<u-button @click="toLogin" type="primary">手机号验证码注册登录</u-button>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import checkLogin from '@/common/checkLogin.js'
	import {
		wxLogin
	} from '@/reuqust/api.js';
	export default {
		data() {
			return {
				baseList: [{
						name: '../../static/image/1.png',
						title: '代付款'
					},
					{
						name: '../../static/image/2.png',
						title: '代付款'
					},
					{
						name: '../../static/image/3.png',
						title: '代付款'
					},
					{
						name: '../../static/image/4.png',
						title: '代付款'
					}
				],
				isSHow: ''
			}
		},

		onLoad() {
			// console.log(getApp().globalData, 'onload');
			// this.isSHow = getApp().globalData.loginStatus
		},
		onShow() {
			//登录状态检测
			checkLogin()
			this.isSHow = checkLogin()
			// console.log(getApp().globalData, 'onshow');
			// if (getApp().globalData.loginStatus) {
			// 	//已登录的状态
			// 	uni.setTabBarItem({
			// 		//index 索引下标
			// 		index: 3,
			// 		text: "我的"
			// 	})
			// } else {
			// 	uni.setTabBarItem({
			// 		//index 索引下标
			// 		index: 3,
			// 		text: "未登录"
			// 	})
			// }
		},
		methods: {
			toLogin() {
				uni.navigateTo({
					"url": '../toLogin/toLogin'
				})
			},
			//微信一键登录
			wexinLogin(e) {
				console.log(e, 'eeeeee');
				const {
					iv,
					encryptedData
				} = e.detail
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.showToast({
						title: "拒绝之后，无法登录",
						icon: 'error'
					})
				} else {
					//调用微信原生的登录方法   wx.login()
					// 登录需要三个条件  code 临时凭证  iv 向量  encryptedData  加密数据
					wx.login({
						success(res) {
							console.log(res, '响应');
							// 调取接口
							wxLogin({
									code: res.code,
									iv,
									encryptedData
								})
								.then(res => {
									console.log(res, '一键登录结果');
									if (res.data.code == 200) {
										
										uni.setStorageSync('userinfo', res.data.list)
										uni.switchTab({
											"url": '../home/home'
										})
									}
								})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	* {
		list-style: none;
	}

	.header {
		width: 750rpx;
		height: 420rpx;
		background: red;
	}

	.tu {
		width: 750rpx;
		height: 128rpx;
		/* border: 1px solid red; */
		display: flex;
	}

	.tu .img1 {
		width: 128rpx;
		height: 128rpx;
		border-radius: 100%;
		margin-left: 20rpx;
	}

	.tu .t1 .h1 {
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.tu .t1 .p1 {
		width: 235rpx;
		height: 32rpx;
		border: 1px solid #FFFFFF;
		border-radius: 2rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 32rpx;
		margin-left: 6rpx;
	}

	.tu1 {
		width: 750rpx;
		height: 58rpx;
		/* border: 1px solid red; */
		margin-top: 50rpx;
		display: flex;
		justify-content: space-evenly;
	}

	.shou {
		height: 60rpx;
	}

	.tu .t2 {
		width: 152rpx;
		height: 40rpx;
		background: #FFD4CC;
		border: 0 solid #FFFFFF;
		border-radius: 10rpx 0 0 10rpx;
		display: flex;
		margin-top: 44rpx;
		margin-left: 200rpx;
	}

	.tu .t2 .imgg {
		width: 32rpx;
		height: 32rpx;
	}

	.tu .t2 .qian {
		font-size: 20rpx;
		color: #FF6243;
		text-align: right;
		line-height: 38rpx;
		margin-left: 10rpx;
	}


	.tu1 .shi {
		font-size: 36rpx;
		text-align: center;
		color: #FFFFFF;
		line-height: 28rpx;
	}

	.tu1 .wo {
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 20rpx;
		margin-top: 6rpx;
	}

	.tu2 {
		width: 720rpx;
		height: 206rpx;
		background: #FFFFFF;
		z-index: 9;
		border-radius: 8rpx;
		margin-top: 20rpx;
		margin-left: 10rpx;
		position: relative;
	}

	.tu2 .ddd2 {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
	}

	.tu2 .hhh {
		font-size: 32rpx;
		color: #333333;
		line-height: 32rpx;
		margin-top: 20rpx;
		margin-left: 10rpx;
	}

	.tu2 .qqq {
		font-size: 24rpx;
		color: #FF6040;
		line-height: 24rpx;
		margin-top: 30rpx;
		margin-right: 20rpx;
	}

	.grid-text {
		font-size: 28rpx;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		// background: #FFFFFF;
		/* #endif */
	}

	.img22 {
		width: 32rpx;
		height: 32rpx;
	}

	.mj {
		background-color: #f2f2f2;
		height: 40rpx;
	}

	.buttom {
		width: 750rpx;
		height: 0%;
		/* border: 1px solid black; */
		margin-top: 60rpx;
		padding-left: 20rpx;
		padding-top: 40rpx;
		box-sizing: border-box;
		// background-color: #f2f2f2;
		margin-bottom: 390rpx;
	}

	.de {
		width: 750rpx;
		display: flex;
		/* justify-content: space-between; */
		margin-bottom: 48rpx;
	}

	.zuo {
		width: 710rpx;
		// display: flex;
		justify-content: space-between;
	}

	.zuo image {
		width: 32rpx;
		height: 32rpx;
		margin-top: 2rpx;
		margin-right: 10rpx;
	}

	.you {
		font-size: 24rpx;
		color: #666666;
		line-height: 24rpx;
		// margin-right: 30rpx;
	}

	.you1 {
		margin-left: -136rpx;
	}

	// 一建登录
	.center {
		height: 950rpx;
		background: #f2f2f2;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.center .hhh {
		font-size: 48rpx;
		color: #666666;
		text-align: center;
		line-height: 48rpx;
	}

	.center .ttt image {
		width: 364rpx;
		height: 84rpx;
		text-align: center;
		margin-top: 48rpx;
	}

	.weixin {
		width: 670rpx;
		// height: 58rpx;
		background-color: #FF6040 !important;
		margin-top: 48rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 62rpx;

	}

	.center .haO button {
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		line-height: 24rpx;
		margin-top: 48rpx;
	}
</style>
